<template>
	<view>

		<view class="fullscreen-bg">
			<!-- 在这里放置你的其他内容（会覆盖在背景图上） -->
			<view style="margin: 26rpx;">
				<view class="user-top">
					<view style="display: flex;align-items: center;justify-content: center;width:60%;">
						<image src="/static/my/dq.png" mode="aspectFill"
							style="width: 40px;height: 40px;margin: 0 11px;"></image>
						<text
							style="margin-left: 15rpx;display: block;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;width: 70%;">
							{{username}}</text>
					</view>
					<view>
						<!-- <image src="/static/my/tz.png" mode="aspectFill" -->
							<!-- style="width: 20px;height: 17px;margin: 0 11px;"></image> -->
						<view class="hamburger" @click="toggle">
							<view :class="active == 'active' ? 'active':''"></view>
							  <svg viewBox="0 0 32 32">
							    <path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
							    <path class="line" d="M7 16 27 16"></path>
							  </svg>
							</view>
					
							<uni-popup ref="popup" :mask-click="false">
								<view class="content-popup">
									<view class="contens">
										<view class="content-header">
											<view>
												<img src="@/static/home/game.png" alt="">
												<view class="header-name">
													<view>共创社区</view>
													<view>Gc</view>
												</view>
											</view>
										
										</view>
										
										<view class="tab-lists">
											<view class="tab-list" v-for="(item,index) in tabList2" 
											:key="index"
											@click="btnList(item)"
											>
												<view>
													<img :src="item.img" width="30" height="30" alt="">
												    <text class="tba-name">{{item.text}}</text>
												</view>
												<view><img src="@/static/home/xia.png" alt="" /></view>
											</view>
											
										</view>
									</view>
									<view class="popupFooter">
										<img src="@/static/home/dt.png" alt="" @click="toMy()"/>
										<img src="@/static/home/gb.png" alt="" />
										<img src="@/static/home/yx.png" alt="" />
									</view>
								</view>
							<!-- 	<button @click="close">关闭</button> -->
							</uni-popup>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<view class="content">
				<view class="header">
					<view v-for="(item,index) in headerList" :key="index" :style="{marginLeft:index==1?'40rpx':0,}"
						:class="{'headerActive':headerActive==index}" @click="btnHeader(index)">
						{{item.name}}
					</view>

				</view>
				<!-- 广场 -->
				<view v-show="headerActive ==0">
					<view class="square-tab">
						<view class="tabs" v-for="(item,index) in tabList" :key="index"
							:class="{'tabAcitve': tabAcitve == index}" @click="btnTable(index)">

							{{item.name}}
						</view>
					</view>
					<!-- 最新内容 -->
					<view v-show="tabAcitve == 0">
							<view class="contentName">功能正在开发中……</view>
					</view>
					<!-- 热门 -->
					<view v-show="tabAcitve == 1">
						<view class="contentName">功能正在开发中……</view>
					</view>
					<!-- 动态 -->
					<view v-show="tabAcitve == 2">
							<view class="contentName">功能正在开发中……</view>
						<!-- <view class="content-area">
							<view class="areas">
								<view class="imgs">
									<img src="@/static/home/photo.png" alt="">
								</view>
								<view>
									<view class="lists-name">
										尽快就看见
										<text class="times">1分钟</text>
									</view>
									<view class="area-name">
										超7,000枚BTC从交易所流出，机构正在潜伏?短短数小时内，超过7,000枚BTC自交易所被提取，金额超5亿美元，净流入转负，释放出明确信号：机构资金吸筹迹象明显，作为漂亮国主流资金入...
									</view>
									<view class="img-area">
										<view class="img-left">
											<view class="img-left2">
												<img class="img-left2" src="@/static/home/nameLeft.png" alt="">
											</view>
										</view>
										<view class="img-right">
											<view class="img-right2">
												<img class="img-right2" src="@/static/home/nameRight.png" alt="">
											</view>
										</view>
									</view>
									<view class="footers">
										<view style="color: rgb(185, 185, 185);">回复</view>
										<view style="color: rgb(185, 185, 185);">
											<img style="position: relative;top: 4rpx;" src="@/static/home/like.png"
												alt="">
											<text style="padding-left: 24rpx;">0</text>
										</view>
									</view>
								</view>
							</view>

						</view> -->
					</view>
				</view>
				<!-- 快讯 -->
				<view v-show="headerActive ==1">
					
			
			
					<view >
						<view class="content-area" v-for="(item,index) in news" :key="index">
							<view class="areas">
								
								<view>
									<view class="lists-name">
										{{item.title}}
										<text class="times">{{item.time}}</text>
									</view>
									<view class="area-name">
										<text v-html="item.content"></text>
									</view>
									<view class="img-area">
										<view class="img-left" v-for="(item2,index2) in item.images" :key="index">
											<view class="img-left2">
												<img class="img-left2" :src="item2" alt="">
											</view>
										</view>
										
									</view>
									
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
	<view class="footer-area">
			<view v-for="(item, index) in listDate" :key="index" class="tab-item"
				:class="{ 'active': currentIndex === index+1 }" @click="btnTab(item.pagePath, index)">
			 <button v-if="index==2"  id="payButton" class="btnPostion flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
			        <i class="fa-brands fa-bitcoin"></i>
			        <span>Pay</span>
			    </button>
				<div v-if="index==2" class="bg-dark text-light min-h-screen flex items-center justify-center">
				    <button id="payButton" class="flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
				        <i class="fa-brands fa-bitcoin"></i>
				        <span>Pay</span>
				    </button>
					</div>
				<image v-else :src="currentIndex === index+1 ? item.selectedIconPath : item.iconPath" class="tab-icon" />
			</view>
		</view>
		</view>
		<!-- <uni-popup ref="popup" :mask-click="false">
			<view class="content-popup">
				<view class="contens">
					<view class="content-header">
						<view>
							<img src="@/static/home/game.png" alt="">
							<view class="header-name">
								<view>共创社区</view>
								<view>Gc</view>
							</view>
						</view>
					
					</view>

					<view class="tab-lists">
						<view class="tab-list" v-for="(item,index) in tabList2" :key="index" @click="btnList(item)">
							<view>
								<img :src="item.img" width="30" height="30" alt="">
								<text class="tba-name">{{item.text}}</text>
							</view>
							<view><img src="@/static/home/xia.png" alt="" /></view>
						</view>

					</view>
				</view>
			</view>
		
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:"",
				username:"",
				userInfo: null,
				tabAcitve: 0,
				headerActive: 0,
				news:[],
				tabList2: [
					{
											img: require('@/static/home/tab1.png'),
											text:'Game Fi'
										},
										{
											img: require('@/static/home/tab2.png'),
											text:'NFT市场'
										},
										{
											img: require('@/static/home/tab3.png'),
											text:'NFT挖矿'
										},
										{
											img: require('@/static/home/tab4.png'),
											text:'NFT铸造'
										},
										{
											img: require('@/static/home/tab5.png'),
											text:'个人中心'
										},
										{
											img: require('@/static/home/tab6.png'),
											text:'仪表盘'
										}
				],
				tabList: [{
						name: '最新内容'
					},
					{
						name: '热门'
					},
					{
						name: '动态'
					}
				],
				headerList: [{
						name: '广场'
					},
					{
						name: '快讯'
					},
				],
				currentIndex: 2,
				listDate: [{
						pagePath: "/pages/home/home",
						iconPath: "/static/home/home.png",
						selectedIconPath: "/static/home/homeActive.png",

					},
					{
						pagePath: "/pages/family/family",
						iconPath: "/static/home/family.png",
						selectedIconPath: "/static/home/familyActive.png",
					},
					{pagePath: '/pages/my/myAccount?activeIndex=充值',
						iconPath: "/static/home/add.png",
						selectedIconPath: "/static/home/add.png",
					},
					{
						pagePath: "/pages/ranking/ranking",
						iconPath: "/static/home/ranking.png",
						selectedIconPath: "/static/home/rankingActive.png",
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/home/my.png",
						selectedIconPath: "/static/home/myActive.png",
					},
				]
			}
		},
		mounted() {
		
			this.getList()
			this.getUserInfo() 
		},
		methods: {
			toMy(){
			uni.navigateTo({
				url: '/pages/my/my'
			});
			},
			//报错
			getUserInfo() {
						let tmp = uni.getStorageSync('userInfo')
						this.username=''
						if (tmp) {
							this.userInfo = JSON.parse(tmp)
							const username=this.userInfo.username
							this.username=  `${username.slice(0, 4)}...${username.slice(-6)}`;
							console.log(this.username)
							return 
						}
						uni.$ice.post('user/index', {}, false).then(res => {
							uni.setStorageSync('userInfo', JSON.stringify(res.data));
							this.userInfo = res.data
							const username=this.userInfo.username
							this.username=  `${username.slice(0, 4)}...${username.slice(-6)}`;
							if (this.userInfo.username != uni.$ice.walletAddress) {
								uni.removeStorageSync("token")
								location.reload();
							}
							uni.stopPullDownRefresh()
		
						}).catch(err => {
		
						})
					},
			toggle() {
				if(this.active == ''){
					this.$refs.popup.open('top')
					this.active = 'active'
				}else{
					
					this.active = ''
						this.$refs.popup.close()
				}
			},
			//关闭弹框
			btnClose() {
				this.$refs.popup.close()
			},
			getList() {
				uni.$ice.post('index/article', {}, false).then(res => {
					console.log('这个数据是什么', res)
					
					this.news = res.data
					uni.stopPullDownRefresh()

				}).catch(err => {

				})
			},
			//点击跳转
			btnList(e) {
				if (e.text == 'Game Fi') {
					uni.navigateTo({
						url: '/pages/game/game'
					});
				} else if (e.text == '个人中心') {
					uni.navigateTo({
						url: '/pages/my/my'
					});
				}
				else if(e.text == '仪表盘'){
					uni.navigateTo({
						url: '/pages/home/home'
					});
				}
				else {
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}

			},
			btnTable(e) {
				this.tabAcitve = e
			},
			btnHeader(e) {
				this.headerActive = e
			},
			btnTab(path, index) {
		console.log('222211112222', path)
		console.log('222222222222', index)
		this.currentIndex = index
			console.log('2223333332222', this.currentIndex )
				
				uni.navigateTo({
					url: path
				})
			}

		}
	}
</script>

<style scoped>
	.footers {
		display: flex;
		margin-top: 24rpx;
		justify-content: space-between;
	}

	.img-right2 {
		width: 98%;

		height: 100%;
		border-top-right-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}

	.img-left2 {
		width: 98%;

		height: 100%;
		border-top-left-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
	}

	.img-left {
		flex: 1;
		height: 180rpx;
	}

	.img-right {
		flex: 1;
		height: 180rpx;
		display: flex;
		justify-content: end;
	}

	.img-area {
		display: flex;
		margin-top: 18rpx;
	}

	.area-name {
		margin-top: 7px;
		margin-left: 12px;
	}

	.times {
		font-size: 13px;
		color: rgb(185, 185, 185);
		margin-left: 12px;
		position: relative;

	}

	.lists-name {

		font-size: 36rpx;
		position: relative;
		left: 24rpx;
		padding-top: 18rpx;
	}

	.imgs {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;

	}

	.areas {
		width: 90%;
		margin: 0 auto;
		display: flex;
		padding-top: 16px;
	}

	.content-area {
		width: 100%;
		background-color: #212437;
		margin-top: 40rpx;
		border-radius: 10px;
		padding-bottom: 32rpx;
	}

	.tabAcitve {
		background: linear-gradient(180deg, rgb(27, 88, 249) 19.847%, rgb(89, 133, 248)) !important
	}

	.square-tab {
		display: flex;
		position: relative;
		left: -36rpx;
		margin-top: 36rpx;

	}

	.tabs {
		padding: 20rpx 50rpx 20rpx 50rpx;
		background-color: #212437;
		color: white;
		text-align: center;
		margin-left: 32rpx;
		border-radius: 6px;
	}

	.headerActive {
		color: white;
	}

	.header {
		display: flex;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #212437;
		color: rgb(185, 185, 185);
	}

	.content {
		width: 90%;
		margin: 0 auto;
	}

	.user-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-top text {
		color: rgb(255, 255, 255);
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 20px;
		font-weight: 700;
		line-height: 28px;

	}
	.line {
	  fill: none;
	  stroke: white;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke-width: 3;
	  /* Define the transition for transforming the Stroke */
	  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
	              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.line-top-bottom {
	  stroke-dasharray: 12 63;
	}
	
	.hamburger {
	  cursor: pointer;
	  position: relative;
	  z-index: 99999;
	}
	.hamburger view.active + svg {
	  transform: rotate(-45deg);
	}
	.hamburger view {
	  display: none;
	}
	
	.hamburger svg {
	  /* The size of the SVG defines the overall size */
	  height: 3em;
	  /* Define the transition for transforming the SVG */
	  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.hamburger view.active + svg .line-top-bottom {
	  stroke-dasharray: 20 300;
	  stroke-dashoffset: -32.42;
	}

	.tab-item:nth-child(3) .tab-icon {
		/* 选中第三个 Tab（中间的 add 图标） */
		width: 80px !important;
		/* 放大宽度 */
		height: 80px !important;
		/* 放大高度 */
		position: relative;
		top: -84rpx;
	}

	.footer-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 62px;
		/* line-height: 86px; */
		padding-top: 26px;
		display: flex;
		background-color: #212437;
		z-index: 999;
		color: red;
		justify-content: space-around;
		padding-left: 16px;
		padding-right: 16px
	}
	.contentName{
		    text-align: center;
			position: relative;
			top: 32vh;
	}
	.fullscreen-bg {
		position: fixed;
		/* 关键：固定定位 */
		top: 0;
		left: 0;
		width: 100vw;
		/* 100%视窗宽度 */
		height: 100vh;
		/* 100%视窗高度 */
		background-image: url('@/static/banner.png');
		/* 替换为你的图片路径 */
		background-size: cover;
		/* 图片拉伸填满容器 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 禁止重复 */
	}

	.title {
		color: white;
		font-size: 24px;
		position: relative;
		/* 需要设置定位（relative/absolute） */
		z-index: 1;
		/* 确保文字在背景图上方 */
	}

	.tab-icon {
		width: 30px;
		height: 30px;
	}

	.tba-name {
		position: relative;
		font-size: 27px;
		left: 12px;
		top: -5px;

	}

	.tab-list {
		width: 100%;
		height: 80rpx;

		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
	}

	.tab-lists {
		margin-top: 200rpx;
	}

	.header-name {
		display: inline-block;
		margin-left: 18rpx;
		font-size: 24rpx;
	}

	.content-header {
		display: flex;
		padding-top: 46rpx;
		justify-content: space-between;
	}

	.contens {
		width: 87%;
		margin: 0 auto;
	}

	.content-popup {
		width: 100%;
		height: 100vh;
		background-color: rgba(17, 21, 39, 0.8);
	}
</style>